<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小小商店管理系统</title>  
    <link rel="stylesheet" href="../css/login.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <style>
      .container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30%;
  width: 100vw;
}

.logo_text {
  font-family: "PingFang SC";
  font-size: 84px;
  fill: none;
  stroke: url("#geekColor");
  stroke-width: 1;
  stroke-dasharray: 10 800;
  stroke-dashoffset: 10;

  animation: 3s linear 0s drawing forwards;
}

/* 绘画动画 */
@keyframes drawing {
  to {
    stroke-dasharray: 800;
    stroke-dashoffset: 0;
  }
}

       body{
        background:url('/网页图片/login.jpg');
        background-repeat:no-repeat;
        background-size:100% auto;
       } 
    
    #login-box{
        width:30%;
        height:auto;
        margin:0 auto ;
        margin-top:8%;
        text-align:center;
        background:#00000060;
        padding:20px 50px;
        }
    #login-box h1{
        color:#fff;
    }
    #login-box .form .item{
        margin-top:20px;
    }
    #login-box .form .item i{
        font-size:18px;
        color:#fff;
    }
    #login-box .form .item input{
        width:180px;
        font-size:18px;
        border:0;
        border-bottom:2px solid #fff;
        padding:5px 10px;
        background:#ffffff00;
        color:#fff;
    }
    
    #login-box 	button{
        margin-top:40px;
        width:150px;
        height:30px;
        font-size:20px;
        font-weight:700;
        color:#fff;
        background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
        border:0;
        border-radius:15px;
        margin-left: 40px;
    }
    .code_picture{
        width:150px;
        height: 50px;
        margin-left: 350px;
        margin-top: -70px;
        margin-bottom: 30px;
    }
    /* loginin:hover{
       background-color: #05070f;
       color: white;
    } */
 
</style>
</head>

<body>
    <div class="container">
        <svg width="875" height="120" class="text">
          <!-- 定义渐变颜色 -->
          <defs>
            <linearGradient id="geekColor" gradientTransform="rotate(90)">
              <stop offset="0%" stop-color="#91bd3a">
                <!-- 渐变动画 -->
                <animate
                  attributeName="stop-color"
                  values="#91bd3a;#12cad6;#91bd3a"
                  dur="10s"
                  begin="3s"
                  repeatCount="indefinite"
                ></animate>
              </stop>
    
              <stop offset="100%" stop-color="#12cad6">
                <animate
                  attributeName="stop-color"
                  values="#12cad6;#91bd3a;#12cad6"
                  dur="10s"
                  begin="3s"
                  repeatCount="indefinite"
                ></animate>
              </stop>
            </linearGradient>
          </defs>
    
          <text class="logo_text" x="0" y="100">
           小小百货公司管理系统
          </text>
        </svg>
      </div>
	<div id="login-box"> 
		<h1>登陆系统</h1>
        <form action="../login.php" method="POST">
		<div class="form" onsubmit="return longinx()">
			<div class="item">
			   <i class="fa fa-sign-in" style="font-size:24px" class="name"></i>
			   <input type="text" placeholder="用户名" name="user">		   
			</div>
			<div class="item">
			   <i class="fa fa-code" style="font-size:24px" class="name"></i>
			   <input  placeholder="密码" type="password" name="password">		   
			</div>
            <div class="item">
                <i class="fa fa-id-card" style="font-size:24px" class="name"></i>
                <input  placeholder="验证码" type="text" name="code">		   
                <a href=""><img class="code_picture" src="drawpic.php"></a>
         </div>
           
            <button type="submit" class="loginin" onclick="formSubmit()" >登陆</button>
        
		</div>
    </form>
		
	</div>

	<script>
     //获取数据

</script>
</body>
</html>